<#include "/oms/iframe/common/head_index.html" />
<link rel="stylesheet" href="${request.contextPath}/static/oms/iframe/plugins/treetable/css/jquery.treetable.theme.bootstrap.css" />
<link rel="stylesheet" href="https://cdn.bootcss.com/jquery-treetable/3.2.0/css/jquery.treetable.css" />
<@dictionary type="function" fields="Whether,Status,ChannelAttribute"></@dictionary>
<@dictionary type="listjson" fields="Whether,Status,ChannelAttribute"></@dictionary>
<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">栏目管理</h3>
				<div class="box-tools pull-right">
					<@shiro.hasPermission name="cms:channel:create">
						<a class="btn btn-sm btn-primary" target="modal" modal="lg" title="添加" href="${request.contextPath}/cms/channel/add">添加</a>
					</@shiro.hasPermission>
				</div>
			</div>
			<div class="box-body">
				<div class="clearfix">
					<form id="search-form" class="" >
						<div class="col-sm-2">
							<div class="input-group ">
								<select type="text" class="form-control pull-right" id="parentId"  placeholder="" style="width: 100%">
								</select>
							</div>
						</div>
						<div class="col-md-3">
							<button type="button"  onclick="searchRefresh();"  class="btn btn-primary btn-grid-refresh">搜索</button>
						</div>
					</form>
				</div>
				<div class="clearfix" style="padding-top: 15px;">
					<table id="treeTable" class="table table-bordered">
						<thead>
						<tr>
							<th class="col-sm-1 pd-l-lg">
								<span class="pd-l-sm ml20"></span>ID
							</th>
							<th class="col-sm-3 pd-l-lg">
								<span class="pd-l-sm ml20"></span>名称
							</th>
							<th class="col-sm-2">创建人</th>
							<th class="col-sm-2">创建时间</th>
							<th class="col-sm-1">排序号</th>
							<th class="col-sm-1">状态</th>
							<th class="col-sm-2">操作</th>
						</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<#include "/oms/iframe/common/setting_index.html" />
<#include "/oms/iframe/common/bottom_index.html" />
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-treetable/3.2.0/jquery.treetable.js"></script>

<script type="text/javascript">

    var ajaxTree =$.ajax({
        type:"get",
        url:'/cms/channel/treeGrid',
        dataType:'json',
        data:{parentId:0}
    }).done(function(result){
        var o = [];
        var a = result;
        $.each(a, function() {
            if(this.id !== undefined && this.id !==''){
                o.push({'id':this.id,'text':this.name});
            }
        });
        var select2 = $("#parentId").select2({
            data:o,
            placeholder: "上级资源...",
            allowClear: true,
            language: "zh-CN",
            theme: "bootstrap"
        });
        select2.val('${parentId}').trigger("change");
    });

	let parentId = '${parentId}';
	if (parentId===''){
		parentId='0';
	}
	const $ajax = $.ajax({
		type: "get",
		url: '/cms/channel/treeGrid',
		dataType: 'json',
		data: {parentId: parentId}
	});
	$ajax.done(function(result){
        var tbodyHtmlStr="";
        for(var i=0; i<result.length; i++){

            tbodyHtmlStr +=
                '<tr data-tt-id="'+result[i].id+'" data-tt-parent-id="'+result[i].parentId+'"  data-tt-branch="'+result[i].hasChildren+'">'
				+  '	<td>'
				+			result[i].id
				+  '	</td>'
				+  '	<td>'
                +  '   		<i class="'+result[i].iconCls+'"></i> '+result[i].name
                +  '	</td>'
                +  '	<td>'+result[i].createBy+'</td>'
                +  '	<td>'+dateFormat(result[i].createTime)+'</td>'
                +  '	<td>'+result[i].priority+'</td>'
                +  '	<td>'+getStatusDictName(result[i].validStatus)+'</td>'
                +  '	<td>'
                +  '		<a class="btn btn-sm btn-info" title="查看" target="modal" modal="lg" href="${request.contextPath}/cms/channel/view?id='+ result[i].id + '" >'
                +  '			<i class="glyphicon glyphicon-edit"></i>'
                +  '		</a>  '
                +  '		<a class="btn btn-sm btn-warning" title="修改" target="modal" modal="lg" href="${request.contextPath}/cms/channel/update?id='+ result[i].id + '" >'
                +  '			<i class="glyphicon glyphicon-edit"></i>'
                +  '		</a>  '
                +  '		<a class="btn btn-sm btn-danger" title="删除" callback="window.location.reload()" data-body="确认要删除吗？" target="ajaxTodo" method="DELETE" href="${request.contextPath}/cms/channel/delete?id='+ result[i].id + '">'
                +  '			<i class="glyphicon glyphicon-remove"></i>'
                +  '		</a>'
                +  '   </td>'
                +  '</tr>';
        }
        $('#treeTable tbody').html(tbodyHtmlStr);
        var $treeTable= $("#treeTable").treetable({
            theme:'vsStyle',
            expandable: true,
            onNodeExpand : function(){
                var node = this;
                var rows = "<tr data-tt-id=\"loading\" data-tt-parent-id=\""+node.id+"\" data-tt-branch=\"false\"><td colspan='5'><img src=\"${request.contextPath}/static/oms/default/dist/img/common/loading.gif\"/>loading</td></tr>";
                $treeTable.treetable("loadBranch", node, rows);
                $.get("${request.contextPath}/cms/channel/treeGrid?parentId="+node.id,{}, function(result){

                    rows="";
                    for(var i=0; i<result.length; i++){

                        rows +=
                            '<tr data-tt-id="'+result[i].id+'" data-tt-parent-id="'+result[i].parentId+'"  data-tt-branch="'+result[i].hasChildren+'">'
							+  '	<td>'
							+			result[i].id
							+  '	</td>'
							+  '	<td>'
                            +  '   		<i class="'+result[i].iconCls+'"></i>'+result[i].name
                            +  '	</td>'
                            +  '	<td>'+result[i].createBy+'</td>'
                            +  '	<td>'+dateFormat(result[i].createTime)+'</td>'
                            +  '	<td>'+result[i].priority+'</td>'
                            +  '	<td>'+getStatusDictName(result[i].validStatus)+'</td>'
                            +  '	<td>'
                            +  '		<a class="btn btn-sm btn-info" title="查看" target="modal" modal="lg" href="${request.contextPath}/cms/channel/view?id='+ result[i].id + '" >'
                            +  '			<i class="glyphicon glyphicon-edit"></i>'
                            +  '		</a>  '
                            +  '		<a class="btn btn-sm btn-warning" title="修改" target="modal" modal="lg" href="${request.contextPath}/cms/channel/update?id='+ result[i].id + '" >'
                            +  '			<i class="glyphicon glyphicon-edit"></i>'
                            +  '		</a>  '
                            +  '		<a class="btn btn-sm btn-danger" title="删除" callback="window.location.reload()" data-body="确认要删除吗？" target="ajaxTodo" method="DELETE" href="${request.contextPath}/cms/channel/delete?id='+ result[i].id + '">'
                            +  '			<i class="glyphicon glyphicon-remove"></i>'
                            +  '		</a>'
                            +  '   </td>'
                            +  '</tr>';
                    }

                    $treeTable.treetable("unloadBranch", node);
                    $treeTable.treetable("loadBranch", node, rows);
                });
            }
        });
    });

    function searchRefresh(){
        var parentId = "";
        if($("#parentId").val()){
            parentId = $("#parentId").val();
        }
        window.location.href="${request.contextPath}/cms/channel/index?parentId="+parentId;
    }
</script>